﻿@using Limestone.MVC
@model Limestone.ILimeMapNode
@{
    Layout = "~/areas/limestone/views/shared/_layout.cshtml";
}
<script>
    var defaultName = "NewPage";

    $(function () {
        // bind the modal save button
        $('#btnSaveModale').bind('click', function (btnClicked) {
            var $form = $(this).parents('form');

            var pageData = $form.serialize();

            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: pageData,
                error: function (xhr, status, error) {
                    //do something about the error
                },
                success: function (response) {
                    //do something with response
                    RenderPage(response);

                }
            });

            return false; // if it's a link to prevent post
        });


        // make the path form field fill out automagically
        $('#Name').bind('keyup', function () {
            var el = $(this);
            var parentPath = $('#ParentPath').val();
            parentPath = parentPath.substr(0, parentPath.lastIndexOf('/') + 1);
            $('#Path').val(parentPath + el.val());
        });


        // bind the plus buttons
        $('.sitemap .add').bind('click', function () {
            var el = $(this);
            var path = $('div.path', el.parents('li:first')).text();
            $('#Title').val(defaultName);
            $('#Name').val(defaultName);
            $('#ParentPath').val(path + '/');
            $('#Path').val(path + '/' + defaultName);
            //$('#TemplatePath').val();
            $('#createPageModal').modal();
        });
    });    
    
    function RenderPage(page)
    {
        var parentPath = page.Path.substr(0, page.Path.lastIndexOf('/'));
        var parentLi = $("li [data-path='" + parentPath + "']");
        var ul = $('ul', parentLi);
        if(ul.length==0) {
            ul = $('<ul>');
            parentLi.append(ul);
        }

        ul.append($('<li>'+page.Title+'</li>'));
    }
</script>
<h2>
    Sitemap</h2>
<div class="sitemap">
    @Html.LimeMap(Model.Nodes)
</div>
<div id="createPageModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            New page</h3>
    </div>
    <form class="form-horizontal" action="/limestone/sitemap/AddPage">
        <input type="hidden" id="ParentPath"/>
        <div class="modal-body">
            <p>
                <div class="control-group">
                    <label class="control-label" for="Title">
                        Title</label>
                    <div class="controls">
                        <input type="text" id="Title" name="Title" placeholder="Title">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Name">
                        Name</label>
                    <div class="controls">
                        <input type="text" id="Name" name="Name" placeholder="Name">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Path">
                        Path</label>
                    <div class="controls">
                        <input type="text" id="Path" name="Path" placeholder="Path">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="TemplatePath">
                        Template</label>
                    <div class="controls">
                        @*
                    TODO load list of templates
                    *@
                        <select id="TemplatePath" name="TemplatePath">
                            <option value="/plainPage">PlainPage</option>
                        </select>
                    </div>
                </div>
            </p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">
                Cancel</button>
            <button class="btn btn-primary" id="btnSaveModale">
                Add</button>
        </div>
    </form>
</div>
